import styled from 'styled-components'
import editImg from '@img/btn-icon-meetingEditor.png'
import deleteImg from '@img/btn-icon-meetingDelete.png'
import endImg from '@img/btn-icon-meetingEnd.png'
import detailImg from '@img/btn-icon-meetingDetail.png'
import closeImg from '@img/btn-icon-meetingSimple-close.png'
import organizerImg from '@img/meetingDetail-organizer.png'
import roomImg from '@img/meetingDetail-room.png'
import personImg from '@img/meeting-person.png'
import briefImg from '@img/meetingDetail-brief.png'
export const StyledColumn = styled.div<{ w?: number; background?: string }>`
	display: flex;
	flex: ${({ w }) => (w ? `0 0 ${w}px` : '1')};
	flex-direction: column;
	background: ${({ background }) => background};
	position: relative;
	&.moving {
		cursor: pointer;
	}
	.cell {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex: 1 0 100px;
		border-bottom: 1px solid #dedede;
		border-left: 1px solid #dedede;
		.times {
			font-size: 12px;
			text-align: center;
			margin-top: 2px;
		}
		.dotted-slot {
			border-top: 1px dotted #ebebeb;
			flex: 1 0;
			&:first-child {
				border-top: none;
			}
		}
	}
	.current-time-line {
		position: absolute;
		width: 100%;
		height: 2px;
		background: red;
		margin-top: -1px;
	}
	.current-time-triangle {
		position: absolute;
		width: 0;
		height: 0;
		border-left: 5px solid red;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		margin-top: -5px;
	}
	.add-item {
		position: absolute;
		background: #8ea7d6;
		border: 1px solid #e7e7e7;
		font-size: 12px;
		color: #ffffff;
		box-shadow: 2px 2px 10px hsl(0deg 0% 39% / 60%);
		padding: 2px;
		overflow: hidden;
	}
`
export const StyledCalendar = styled.div`
	.calendar-header {
		display: flex;
		padding-left: 70px;
		padding-bottom: 10px;
		background: #ffffff;
		.header-item {
			flex: 1;
			text-align: center;
			color: #000;
			font-size: 12px;
		}
	}
	.calendar-body {
		height: 700px;
		overflow-y: scroll;
		.calendar-list {
			border-top: 1px solid #dedede;
			display: flex;
		}
		* {
			user-select: none;
		}
	}
`
export const StyledCard = styled.div`
	position: absolute;
	overflow: hidden;
	background: #e7e7e7;
	padding: 1px;
	box-sizing: border-box;
	border: 1px solid rgb(193, 200, 203);
	&:hover {
		box-shadow: 2px 2px 10px #ababab;
		cursor: pointer;
		z-index: 9;
	}
	.card-wrap {
		box-sizing: border-box;
		background: #8ea7d6;
		padding: 4px 2px 4px 10px;
		height: 100%;
		&.mine {
			background-color: rgb(142, 167, 214);
		}
		&.participate {
			background-color: rgb(147, 184, 117);
		}
		&.not-approved {
			background-color: #ffa5b3;
		}
		&.approving {
			background-color: #ffdf4d;
		}
		&.expired {
			background-color: rgb(193, 200, 203);
		}
	}
	p {
		font-size: 12px;
		line-height: 18px;
		color: #fff;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		&.subject {
			font-weight: 700;
		}
	}
`
export const StyledCardDetail = styled.div<{ top?: string; left?: string }>`
	position: fixed;
	top: ${({ top }) => top ?? '0px'};
	left: ${({ left }) => left ?? '0px'};
	width: 250px;
	border: 1px solid gray;
	background: #fff;
	z-index: 99;
	font-size: 12px;
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #046c6a;
		color: #fff;
		height: 35px;
		padding-left: 20px;
		padding-right: 10px;
		.close-icon {
			display: inline-block;
			width: 20px;
			height: 20px;
			background: url(${closeImg});
			cursor: pointer;
		}
	}
	.content {
		position: relative;
	}
	.body {
		background: #fff;
		border: 2px solid #e9e9e9;
		color: #444;
		margin: 10px;
		padding-left: 12px;
		height: 185px;
		.operates {
			padding-top: 8px;
			.btn {
				display: inline-block;
				width: 22px;
				height: 22px;
				margin: 0 3px;
				cursor: pointer;
				&.edit {
					background: url(${editImg});
				}
				&.delete {
					background: url(${deleteImg});
				}
				&.endMeeting {
					background: url(${endImg});
				}
				&.detail {
					background: url(${detailImg});
				}
			}
		}
		.line {
			display: flex;
			align-items: center;
			margin-top: 8px;
			.icon {
				display: inline-block;
				height: 20px;
				width: 20px;
				margin-right: 10px;
			}
			&.creator .icon {
				background: url(${organizerImg});
			}
			&.room .icon {
				background: url(${roomImg});
			}
			&.members .icon {
				background: url(${personImg});
			}
			&.brief .icon {
				background: url(${briefImg});
			}
			.more {
				flex-shrink: 0;
				color: green;
				margin-left: 10px;
				text-decoration: underline;
				cursor: pointer;
			}
			.text {
				max-width: 116px;
			}
		}
	}
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 250px;
		height: 210px;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
	}
`
export const StyledDeleteMeetingDialog = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	.content {
		width: 280px;
	}
	.other-reason {
		display: flex;
		margin-top: 25px;
		height: 23px;
		.reason-input {
			margin-left: 45px;
		}
	}
`
export const StyledRegularMeetingDialog = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	.content {
		display: flex;
		flex-direction: column;
		width: 200px;
		.checked-item {
			padding-top: 15px;
		}
	}
`
